<template>
  <ul class="flex gap-12 m-0">
    <li 
      v-for="i in subMenus" 
      :key="i.route" 
      :class="[
        'menuitem',
        { 'current': current === i.route }
      ]"
      @click="jump(i)"
    >
      {{ i.title }}
    </li>
  </ul>
</template>
<script lang="ts" setup>
import { ref, unref, watch } from 'vue'
import { router } from '/@/router'
import { useRouter } from 'vue-router';
import { subMenus, SubMenu } from './data/index'

const { currentRoute } = useRouter()

const current = ref<string>('/index')

watch(currentRoute, (newVal: any) => {
  current.value = unref(newVal).fullPath
}, {  deep: true, immediate: true })

function jump(r: SubMenu) {
  current.value = r.route
  router.push({
    path: r.route
  })
}

</script>
<style lang="less" scoped>
.menuitem {
  height: 48px;
  line-height: 48px;
  color: #fff;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #666666;
  cursor: pointer;
  &.current {
    color: #1FBA85;
    position: relative;
    &::after {
      content: '';
      width: 24px;
      height: 3px;
      background: #1FBA85;
      border-radius: 2px;
      position: absolute;
      bottom: -14px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>
